<template>
  <div class="page">
    <goods :item="item"></goods>
    <div class="group">
<!--      :desc="`开团情况：${members.length}/${item.numberOfMember}`"-->
      <van-panel
        title="拼团倒计时"
        :desc="`开团情况：${members.length}/12`"
        :status="time"
      >
        <div v-show="time_switch" class="content flex-row">
          <van-button type="primary" size="small" @click="openGroup">我要开团</van-button>
          <van-button type="info" size="small" @click="joinGroup">我要参团</van-button>
          <van-button type="warning" size="small" @click="share">邀请好友一起来参团</van-button>
        </div>
      </van-panel>
    </div>
    <div class="group">
      <van-panel title="参团记录">
        <van-cell
          :title="item.userID"
          v-for="(item, index) in members"
          :key="index"
          :label="item.groupBuyTime"
          :value="index===0?'团长':'团员'"
        >
          <img
            class="icon"
            slot="icon"
            src="http://edu-image.nosdn.127.net/7c5a8d29-ce20-4f97-a3a6-49872772667d.png"
          />
        </van-cell>
      </van-panel>
    </div>
    <div class="group">
      <van-panel title="拼团须知">
        <div class="content">
          <p>1. 就爱看的南方喀京东方阿斯蒂芬阿道夫</p>
          <p>2. 就爱看的南方喀京东方阿斯蒂芬阿道夫是考虑对方设计风格</p>
          <p>3. 就爱看的南方喀京东方阿斯蒂芬阿道夫是考虑对方设计风格 发的该死的风格是大法官双方各</p>
        </div>
      </van-panel>
    </div>
    <sku ref="sku" :item="item" :type="type" @buy="buy"></sku>
      <van-dialog
              v-model="show"
              title="邀请链接"
              show-cancel-button
      >
          <div class="name">{{url}}</div>
      </van-dialog>
  </div>
</template>

<script>
import Tabbar from '@/components/Tabbar.vue'
import Goods from '@/components/Goods.vue'
import Sku from '@/components/Sku.vue'
import mixin from '@/mixin'
import { postPurchase, groupDetail } from '@/api'

export default {
  name: 'group',
  mixins: [mixin],
  components: {
    Tabbar,
    Goods,
    Sku
  },
  data() {
    return {
      timer: null,
      time: '',
        show: false,
        group: {},
        url:'',
      item: this.$store.state.currentGoods,
      type: 'group',
      time_switch:true
    }
  },
  created() {
    this.getData()
  },
  computed: {
    members() {
      let list = this.group.memberList
      console.log(list)
      if (list) {
        return JSON.parse(list)
      } else {
        return []
      }
    }
  },
  methods: {
    getData() {
      console.log(this.id)
      groupDetail(this.id).then(res => {
        this.group = res
        this.setData()
        this.timer = setInterval(() => {
          this.setData()
        }, 1000)
      })
    },
    setData() {
      let end = this.$moment(this.group.createTime).add('hours', this.group.duration || 20).valueOf()
      let now = Date.now()
      let ms = end - now
      if (ms > 0) {
        let d = 24 * 3600000
        let h = 3600000
        let m = 60000
        let s = 1000
        let msd = ms % d
        let msh = ms % d % h
        let msm = ms % d % h % m
        let dd = Math.floor(ms / d)
        let hh = Math.floor(msd / h)
        let mm = Math.floor(msh / m)
        let ss = Math.floor(msm / s)
        this.time = `${dd}天${hh}时${mm}分${ss}秒`
      } else {
        this.time = '结束了';
        // this.time_switch = false;
      }
    },
    openGroup() {
        this.$router.push('/open-group')
    },
    buy(data) {
      data.groupBuyID = this.group.groupBuyID
      postPurchase(data).then(res => {
        console.log(res)
        this.$toast('购买成功')
        this.getData()
      })
    },
    joinGroup(id) {
      // console.log(this.id);
      this.$refs.sku.buy(this.id)
    },
    onBuyClicked() {
      this.buy = false
      this.$toast('模拟提交')
    },
    share(){
        this.show = true
        // this.url = 'http://localhost:8080/ylyw-mobile/#/t-goods-detail?' + 'productId=' + this.item.productID + '&distributorID=' + localStorage.getItem('userID')
        this.url = 'http://localhost:8080/ylyw-mobile/#/t-goods-detail?' + 'productId=' + this.item.productID + '&distributorID=-1'
    }
  }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import '../style/mixin'
.group
  margin-top $part-width
.content
  box-sizing border-box
  padding 15px
  font-size 14px
  color #555555
  line-height 24px
  p
    margin-bottom 8px
  img 
    width 100%
    margin-bottom 10px
img.icon
  width 44px
  height 44px
  margin-right 10px
.price
  font-weight bold
  color #ff0000
</style>
